<template>
  <div class="page-loadmore">
    <h1 class="page-title">Pull up</h1>
    <div class="page-loadmore-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
      <mt-loadmore 
	  :top-method="loadTop" 
	  @top-status-change="handleTopChange" 
	  :bottom-method="loadBottom" 
	  @bottom-status-change="handleBottomChange" 
	  :bottom-all-loaded="allLoaded" 
	  ref="loadmore">
        <ul class="page-loadmore-list">
          <li v-for="item in list" class="page-loadmore-listitem">{{ item }}</li>
        </ul>
       <div slot="top" class="mint-loadmore-top">
          <span v-show="topStatus !== 'loading'" :class="{ 'is-rotate': topStatus === 'drop' }">↓</span>
          <span v-show="topStatus === 'loading'">
            <mt-spinner type="snake"></mt-spinner>
          </span>
        </div>
        <div slot="bottom" class="mint-loadmore-bottom">
          <span v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }">↑</span>
          <span v-show="bottomStatus === 'loading'">
            <mt-spinner type="snake"></mt-spinner>
          </span>
        </div>
      </mt-loadmore>
    </div>
  </div>
</template>
<style> 
.mint-loadmore-top span {
    -webkit-transition: .2s linear;
    transition: .2s linear
}
.mint-loadmore-top span {
    display: inline-block;
    vertical-align: middle
}
 
.mint-loadmore-top span.is-rotate {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}
 
.page-loadmore .mint-spinner {
    display: inline-block;
    vertical-align: middle
}
.page-loadmore-listitem {
    border-bottom: 1px solid #eee
}
.page-loadmore-listitem {
    height: 50px;
    line-height: 50px;
    text-align: center
}
.page-loadmore-listitem:first-child {
    border-top: 1px solid #eee
}
.page-loadmore-wrapper {
    overflow: scroll
}
.mint-loadmore-bottom span {
    display: inline-block;
    -webkit-transition: .2s linear;
    transition: .2s linear;
    vertical-align: middle
}
.mint-loadmore-bottom span.is-rotate {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}
</style>
<script type="text/babel">
  export default {
    data() {
      return {
        list: [],//列表数据
        allLoaded: false,//是否上拉
        bottomStatus: '',//上拉状态
		topStatus: '',//下拉状态
        wrapperHeight: 0,//元素自适应高度
      };
    },
 
    methods: {
		//改变上拉状态
      handleBottomChange(status) {
        this.bottomStatus = status;
      },
	  //改变下拉状态
	  handleTopChange(status) {
	    this.topStatus = status;
	  },
	  //请求
      loadBottom() {
        setTimeout(() => {
          this.$refs.loadmore.onBottomLoaded();
        }, 1500);
      },
      loadTop() {
        setTimeout(() => {
          this.$refs.loadmore.onTopLoaded();
        }, 1500);
      },
},
	//初始化
    created() {
      for (let i = 1; i <= 20; i++) {
        this.list.push(i);
      }
    },
    mounted() {
      //自适应高度
	  this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
    }
  };
</script>


<!-- <template>

<div class="detail" ref="wrapper" style="overflow: scroll;height: 500px;">
  <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" @bottom-status-change="handleBottomChange"
               ref="loadmore" :bottom-all-loaded="allLoaded" :auto-fill="false">
    <ul>
      <li v-for= 'item in list'>
		{{item}}
      </li>
    </ul>
    <div class="noInner" v-if="more">暂无更多内容喽！</div>
  </mt-loadmore>
</div>
</template>
<script>
  export default {
    data() {
      return {
        topStatus: '',
		allLoaded:false,
		list:[1,2,3,4,5,6,7,8,9,0,5,4,5,6,7,8,9,0],
		more:false,
        // ... this.allLoaded = true;
      };
    },
    methods: {
		
		loadTop(){//下拉刷新
		   let time = setTimeout(()=>{
		   	console.log('下拉刷新')
		   	this.list.unshift("qw")
		   	 this.$refs.loadmore.onTopLoaded();
		   }, 1000);
		},
		loadBottom() {//上拉加载
		console.log('上拉加载')
		this.list.push("qw");
		  setTimeout(()=>{
			   // that.allLoaded = true;
				this.$refs.loadmore.onBottomLoaded();
			   console.log("商店列表页面错误：",err)
		  },1000)
		},
		handleBottomChange(){
		  if(this.allLoaded == true){
		    this.more = true;
		    setTimeout(()=>{
		      this.more = false;
		    },2000)
		  }
		},
		
		
		
		
		

		
		
		
  //     handleTopChange(status) {
  //       this.topStatus = status;
  //     },
	 //  //下拉刷新·
	 //  loadTop() {
	 //  	// this.loadFrist();
		// // alert("下拉");
		// console.log('下拉')
		// let time = null;
		
		// clearTimeout(time);
		// time = setTimeout(()=>{
		// 	console.log('200')
		// 	this.list.unshift("qw")
		// 	// this.$refs.loadmore.onTopLoaded();
		// }, 1000);
	 //  },
	 //  loadBottom() {
	 //  	console.log('上拉')
		// this.list.push("hhhhhhhhh")
		// let time = null;
		// clearTimeout(time);
		// time = setTimeout(()=>{
		// 	console.log('300')
		// 	this.allLoaded=true;
		// 	this.$refs.loadmore.onTopLoaded();
		// }, 1000);
	 //  },
      // ...
    },
    // ...
  }; -->
<!-- </script>
<style lang="scss" scoped>
	li{
		height: 60px;
		margin: 10px 0;
		background: #ccc;
		text-align: center;
	}
	
</style> -->
